<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>

<body>
    <!-- 小图 -->
    <div style="background-color:red;border: dotted; height: 50px; width: 50px">
        <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
    </div>
    <!-- 大图 -->
    <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
        <img src="" id="big" style="width: 400px; height: 400px; display:none;">
    </div>

    <!-- 开始和结束按钮 -->
    <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
    <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];

    //2.定义计数器
    let count = 0;

    //3.定义定时器对象
    let time = null;

    //4.定义图片路径变量
    let imgSrc = "";

    //5.为开始按钮绑定单击事件
    $("#startBtn").click(function () {
        //6.设置按钮状态
        // 禁用开始按钮
        $("#startBtn").prop("disabled", true);
        // 启用禁止按钮
        $("#stopBtn").prop("disabled", false);

        //7.设置定时器，循环显示图片
        time = setInterval(function () {
            //8.循环获取图片路径
            let index = count % imgs.length;

            //9.将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src", imgSrc);

            //10.计数器自增
            count++;
        }, 10);

        //11.为停止按钮绑定单击事件
        $("#stopBtn").click(function () {
            //12.取消定时器
            clearInterval(time);

            //13.设置按钮状态
            // 启用开始按钮
            $("#startBtn").prop("disabled", false);
            // 禁止停止按钮
            $("#stopBtn").prop("disabled", true);

            //14.将图片显示到大图片上
            $("#big").prop("src", imgSrc);
            $("#big").prop("style", "width: 400px; height: 400px;");
        })


    });

</script>

</html>